<template>
  <template v-for="item in menu" :key="item.id || item.id">
    <el-sub-menu v-if="!item.isFile" :index="item.id">
      <template #title><FolderOpenOutlined class="mr3" />{{ item.label }}</template>
      <!-- 递归渲染子菜单 -->
      <MyMenu :menu="item.children" />
    </el-sub-menu>

    <el-menu-item v-else :index="item.id"> <FileOutlined class="mr3" /> {{ item.label }} </el-menu-item>
  </template>
</template>

<script setup lang="ts" name>
import { FolderOpenOutlined, FileOutlined } from '@ant-design/icons-vue'

defineOptions({
  name: 'MyMenu'
})

// 菜单项类型定义
interface MenuItem {
  name: string
  path?: string
  children?: MenuItem[]
}

// 传入的菜单数据
const props = defineProps<{
  menu: MenuItem[]
}>()
</script>
